<template>
  <el-dialog
    title="提醒设置"
    :visible.sync="innerValue"
    width="720px"
    :destroy-on-close="false"
    @open="onOpened"
    @closed="onClosed"
  >
    <main>
      <el-form ref="remindForm" :model="remindData" :inline="true" size="small" label-suffix="：" :rules="remindRules">
        <el-form-item label="提醒时间" prop="reminderTime" class="!mb-0">
          <TDatePicker
            v-model="remindData.reminderTime"
            placeholder="提醒时间"
            format="YYYY-MM-DD HH:mm"
            valueFormat="YYYY-MM-DD HH:mm"
            :clearable="true"
          />
        </el-form-item>
        <el-form-item label="提醒内容" prop="reminderContent" class="!mb-0">
          <el-input
            v-model="remindData.reminderContent"
            placeholder="提醒内容"
            :maxlength="30"
            :show-word-limit="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="common-secondary-bg">
        <div class="common-secondary-title"></div>
        提醒人员
      </div>
      <CheckPersonnelSelection v-if="showCheckPersonnelSelection" ref="checkPersonnelDom" :key="businessType" />
    </main>
    <div slot="footer">
      <el-button size="small" class="common-search-btn" @click="innerValue = false">取 消</el-button>
      <el-button size="small" type="primary" class="common-search-btn" @click="onRemindSave">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * 提醒设置通用组件
 */
import vModelMixin from "@/mixin/v-model";
import CheckPersonnelSelection from "@/components/CheckPersonnelSelection";
import { reminderSettingSet } from "@/api/remind-setting";

export default {
  name: "RemindSetting",
  components: {
    CheckPersonnelSelection,
  },
  mixins: [vModelMixin],
  props: {
    businessId: {
      type: [String, Number],
      default: null,
    },
    businessType: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      // 提醒设置
      remindData: {
        reminderTime: "",
        reminderContent: "",
      },
      personList: [],
      remindRules: {
        reminderTime: [{ required: true, message: "请选择提醒时间", trigger: "change" }],
        reminderContent: [{ required: true, message: "请输入提醒内容", trigger: "blur" }],
      },
      showCheckPersonnelSelection: false,
    };
  },
  methods: {
    onOpened() {
      const that = this;
      this.remindData.reminderTime = "";
      this.remindData.reminderContent = "";
      this.showCheckPersonnelSelection = true;
      this.$nextTick(function () {
        that.$refs.remindForm.clearValidate();
      });
    },
    // 消息提醒保存
    onRemindSave() {
      const reminderUserList = this.$refs.checkPersonnelDom.getSelectNode();
      if (!reminderUserList.length) {
        this.$message.error("请先选择提醒人员");
        return;
      }
      this.$refs.remindForm.validate(async (valid) => {
        if (valid) {
          const { reminderContent, reminderTime } = { ...this.remindData };
          const params = {
            businessId: this.businessId || null,
            businessType: this.businessType,
            reminderTime,
            reminderContent,
            reminderUserList,
            reminderType: 2,
          };
          await reminderSettingSet(params);
          this.$message.success("设置成功");
          this.innerValue = false;
        } else {
          return false;
        }
      });
    },
    onClosed() {
      this.showCheckPersonnelSelection = false;
    },
  },
};
</script>

<style scoped lang="scss"></style>
